<template>
  <div id="app">
    <el-backtop :bottom="100">
      <div
          class="backTop"
      >
        <div class="toTop">
          <img src="@/assets/images/toTop.png" alt="">
        </div>
      </div>
    </el-backtop>
    <VueElement
        :active="vueElementLoading"
        :is-full-screen="true"
        spinner="bar-fade-scale"
        color="#FF6700"
    />
    <Header v-show="route.name!=='404'"/>
    <transition>
      <router-view/>
    </transition>

    <Footer  v-show="route.name!=='404'"/>
  </div>
</template>

<script lang="ts">
import VueElement from 'vue-element-loading'
export default {
  name: 'App',
  components:{VueElement}
}
</script>
<script lang="ts" setup>
import {useSource} from "@/stores/source";
import {storeToRefs} from "pinia";
import {useRoute} from "vue-router";

const {vueElementLoading} = storeToRefs(useSource())
const route = useRoute()
</script>
<style lang="scss">
#app{
  height: 100%;
  .backTop{
    position: relative;
    .toTop{
      position: absolute;
      top: -78px;
      right: -36px;
      img{
        border-radius: 50%;
        width: 130px;
        height: 120px;
      }
    }
  }
}
</style>
